<template>
  <div>
    <div>
      <el-dialog
        :close-on-click-modal="false"
        @close="handMyClose"
        :append-to-body="true"
        title="派车单"
        :visible.sync="dialogVisible1"
        width="60%"
      >
        <div id="printTest">
          <div class="print-top-box">
            <img class="top-icon" src="@/assets/imgs/busprint.png" alt />
            <div class="top-title">
              <div class="title-name">信阳公交公司派车单-{{form.contacts}}</div>
              <div class="title-phone">{{form.phone}} {{form.payType==1?'全款派车单':'定金派车单'}}</div>
            </div>
          </div>
          <div class="unser-msg-box">
            <div class="user-msg-title">客户信息</div>
            <div class="msg-box">
              <div class="msg-list">
                <span class="msg-item">联系电话</span>
                <span class="msg-item-1">{{form.phone}}</span>
              </div>
              <div class="msg-list">
                <span class="msg-item">客户姓名</span>
                <span class="msg-item-1">{{form.contacts}}</span>
              </div>
              <div class="msg-list">
                <span class="msg-item">接车地址</span>
                <span class="msg-item-1">{{form.startCarPosition}}</span>
              </div>
              <div class="msg-list">
                <span class="msg-item">送达位置</span>
                <span class="msg-item-1">{{form.endCarPosition}}</span>
              </div>
              <div class="msg-list">
                <span class="msg-item">出发时间</span>
                <span class="msg-item-1">{{form.startCarTime}}</span>
              </div>
              <div class="msg-list">
                <span class="msg-item">下单时间</span>
                <span class="msg-item-1">{{form.createTime}}</span>
              </div>
              <div class="msg-list">
                <span class="msg-item">乘车人数</span>
                <span class="msg-item-1">{{form.riderNum}}</span>
              </div>
              <div class="msg-list">
                <span class="msg-item">支付状态</span>
                <span class="msg-item-1">{{staList[form.orderStatus-1]}}</span>
              </div>
            </div>
          </div>
          <div class="unser-msg-box">
            <div class="user-msg-title">司机信息</div>
            <div class="msg-box">
              <div class="msg-list">
                <span class="msg-item">联系电话</span>
                <span class="msg-item-1">{{form.driverPhone}}</span>
              </div>
              <div class="msg-list">
                <span class="msg-item">司机姓名</span>
                <span class="msg-item-1">{{form.driverName}}</span>
              </div>
              <div class="msg-list">
                <span class="msg-item">公交牌号</span>
                <span class="msg-item-1">{{form.orderNum}}</span>
              </div>
            </div>
          </div>
          <div class="unser-msg-box">
            <div class="user-msg-title">说明</div>
            <div class="msg-box">
              <div class="msg-list">
                <!-- scope.row.payType==1?'全款派车单':'定金派车单' -->
                <span v-if="form.payType==1">客户选择的是全款的的支付方式，接到客户后，无需确认客户支付尾款即可出发。</span>
                <span v-else>客户选择的是定金+尾款的支付方式，接到客户后，需确认客户支付尾款才可出发。</span>
                <!-- <span >form.payType==1</span> -->
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handNo()">取 消</el-button>
          <el-button v-print="'#printTest'" type="primary" :loading="bntLoading">打 印</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { imgSizi } from '@/utils/myUtils'
export default {
  name: 'SidebarLogo',
  components: {},

  watch: {
    isState(newObj) {
      this.isShow = newObj
    }
  },
  computed: {},
  props: {
    isState: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      staList: ['待确定', '待付款', '进行中', '已完成'],
      passwordType2: 'password',
      capsTooltip2: false,
      passwordType3: 'password',
      capsTooltip3: false,
      bntLoading: false,
      loading2: false,
      rules: {},
      form: {},
      shopStatusOptions: [],
      isShow: 0,
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible1: false,
      addressKeyword: '',
      activeName: 'first',
      dialogVisible: false,
      tipShow: false
    }
  },
  async mounted() {},
  methods: {
    handNo() {
      this.dialogVisible1 = false
    },
    handGetShop(id) {
      this.$api.selectSendCarByIdSendCar({ id }).then(res => {
        function timestampToTime(timestamp) {
          var date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + '-'
          var M =
            date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1) + '-'
              : date.getMonth() + 1 + '-'
          var D =
            date.getDate() < 10
              ? '0' + date.getDate() + ' '
              : date.getDate() + ' '
          var h =
            date.getHours() < 10
              ? '0' + date.getHours() + ':'
              : date.getHours() + ':'
          var m =
            date.getMinutes() < 10
              ? '0' + date.getMinutes() + ':'
              : date.getMinutes() + ':'
          var s =
            date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          return Y + M + D + h + m + s
        }
        res.data.data.createTime = timestampToTime(
          parseInt(res.data.data.createTime)
        )
        res.data.data.startCarTime = timestampToTime(
          parseInt(res.data.data.startCarTime)
        )
        this.form = res.data.data
      })
    },
    handMyClose() {
      this.$refs.form.resetFields()
      // this.$parent.closeFrom()
      for (let key in this.form) {
        this.form[key] = ''
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    handMapShow() {
      this.dialogVisible = true
    },
    handleClick() {}
  }
}
</script>

<style lang="scss" scoped media='print'>
@media print {
}
.unser-msg-box {
  padding: 31px 38px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  background-color: #eee;
  .msg-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 10px;
    .msg-item {
      width: 95px;
      font-weight: bold;
    }
    .msg-item-1 {
    }
  }
  .msg-box {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(202, 202, 202, 1);
    margin-top: 15px;
    box-sizing: border-box;
    padding: 18px;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
  .user-msg-title {
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    line-height: 27px;
  }
}
.print-top-box {
  height: 138px;
  background: rgba(57, 57, 57, 1);
  color: #fff;
  padding: 31px 38px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .top-title {
    margin-left: 45px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .title-name {
      font-size: 25px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: bolder;
      color: rgba(255, 255, 255, 1);
      line-height: 36px;
    }
    .title-phone {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      margin-top: 5px;
      color: rgba(255, 255, 255, 1);
    }
  }
  .top-icon {
    width: 59px;
    height: 62px;
  }
}
.map_btn {
  width: 82px;
  height: 22px;
  background: rgba(56, 173, 147, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  margin-top: 8px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.form_box {
  width: 80%;
  margin: 0 auto;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #38ad93;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #38ad93;
  width: 336px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar {
  width: 336px;
  height: 90px;
  display: block;
}
</style>
